/**
 * By Alpha
 * Author: alixez <alixe.z@foxmail.com>
 * Date: 2017/10/28
 */

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Loader from '../Loader';
import styles from './Page.less';

export default class Page extends Component {

  static propTypes = {
    className: PropTypes.string,
    children: PropTypes.node,
    loading: PropTypes.bool,
    inner: PropTypes.bool,
  };

  render () {
    const { className, children, loading = false, inner = false } = this.props;

    const loadingStyle = {
      height: 'calc(100vh - 184px)',
      overflow: 'hidden',
    };

    return (
      <div
        className={classNames(className, {
          [styles.contentInner]: inner,
        })}
        style={loading ? loadingStyle : null}
      >
        {loading ? <Loader spinning /> : ''}
        {children}
      </div>
    );
  }
}
